#{extends 'main.html' /}
#{set title:'Photos' /}
#{set 'moreStyles'}
    #{get 'moreStyles'/}
    <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/prettyPhoto.css'}">
    <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/pager.css'}">
    %{ if (isAdmin) { }%
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/black-tie/jquery-ui-1.8.15.custom.css'}">
    %{ } }%
#{/set}
#{set 'moreScripts'}
    #{get 'moreScripts'/}
    <script src="@{'/public/javascripts/jquery.prettyPhoto.js'}" type="text/javascript"></script>
    %{ if (isAdmin) { }%
        <script src="@{'/public/javascripts/jquery-ui-1.8.15.custom.min.js'}" type="text/javascript"></script>
    %{ } }%
#{/set}


<h1>All Photos</h1>
<div class="photos">
    %{ j = 1; }%
    #{list items:photos, as:'photo' }
    <article class="photo">
        <div class="a-header none">${photo.title}</div>
        <a rel="prettyPhoto[ajax]" href="${photo.thumb.get(photo.thumb.size() - 1)}">
            <img class="l-${lvl}" src="${photo.thumb.get(lvl)}" alt="" />
        </a>
    </article>
    %{
        if (j++ >= photosInLine) {
    }%
            <div class="clear"></div>
    %{
            j = 1;
        }
    }%
    #{/list}
    <div class="clear"></div>
    #{menu.pages pager:pager /}
    <div class="clear"></div>
</div>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $(".photos a[rel^='prettyPhoto']").prettyPhoto({
        theme: 'light_rounded' /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */
    });
  });
</script>